<template>
  <div class="add_channels_wrap">
    <el-button
      type="primary"
      size="small"
      @click="pop_show = true"
      class="pull-right"
      >新增频道</el-button
    >
    <el-dialog title="新增频道" :visible.sync="pop_show" append-to-body>
      <el-form
        :model="ChannelsForm"
        status-icon
        :rules="rulesChannelsForm"
        ref="ChannelsForm"
        label-width="100px"
      >
        <el-form-item label="频道组：" prop="group_name">
          <el-input v-model="ChannelsForm.group_name" placeholder="输入频道组">
          </el-input>
          <!-- <el-select v-model="ChannelsForm.group_name" size="small">
              <el-option
                v-for="item in group_type_list"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select> -->
        </el-form-item>
        <el-form-item label="一级分类：" prop="cate">
          <el-select v-model="ChannelsForm.cate" size="small">
            <el-option
              v-for="item in category_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            type="text"
            v-model="ChannelsForm.category_name"
            autocomplete="off"
            size="small"
          ></el-input> -->
        </el-form-item>
        <el-form-item label="频道地址：" prop="url">
          <el-input
            type="text"
            v-model="ChannelsForm.url"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="展示顺序：" prop="sequence">
          <el-input
            type="text"
            v-model="ChannelsForm.sequence"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm('ChannelsForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import cons from "@/components/constant";
let token = localStorage.token;
export default {
  name: "AddChannels",
  data() {
    return {
      category_list: [], //一级类别
      pop_show: false,
      // group_type_list: [],

      ChannelsForm: {
        group_name: "",
        cate: "",
        url: "",
        sequence: "",
      },
      rulesChannelsForm: {},
    };
  },
  methods: {
    fnGetCategories() {
      this.axios
        .get(cons.apis + "/goods/channels/firstCate/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log("加载所有的一级分类>>>", dat);
          this.category_list = dat.data;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    // 提交的数据
    submitForm() {
      this.axios
        .post(
          cons.apis + "/goods/addChannel/",
          {
            name: this.ChannelsForm.group_name,
            cate: this.ChannelsForm.cate,
            group_ur: this.ChannelsForm.url,
            sequence: this.ChannelsForm.sequence,
          },
          {
            headers: {
              Authorization: "JWT " + token,
            },
            responseType: "json",
          }
        )
        .then((dat) => {
          console.log("增加频道组的响应>>>>>", dat);
          if (dat.status == 201) {
            this.$message({
              type: "success",
              message: "频道添加成功!",
            });
            this.pop_show = false;
            this.resetForm("ChannelsForm");
            this.$emit("fnResetTable");
          } else {
            this.$message({
              type: "info",
              message: '添加频道组失败',
            });
            // this.pop_show = false;
            this.resetForm("ChannelsForm");
            this.$emit("fnResetTable");
          }
        })
        .catch((err) => {
          if (err.response.code == 400) {
            var errmsg = err.response.msg;

            if (errmsg) {
              this.$message({
                type: "info",
                message: errmsg,
              });
            }

            if (errmsg.non_field_errors) {
              this.$message({
                type: "info",
                message: errmsg.non_field_errors[0],
              });
            }
          }
        });
    },
    // 类别组数据
    fnGetChannelType() {
      this.axios
        .get(cons.apis + "/channels/groups/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log("组数据》》", dat.data.results);
          this.group_type_list = dat.data.results;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
  },
  // 挂载
  mounted() {
    this.fnGetChannelType();
    this.fnGetCategories();
  },
};
</script>
